<template>
  <div class="main-content">
    <!-- self防止事件冲突 -->
    <div style="">
      <h1>
        <img :src="avatarUrl" class="avatar">{{nickname}}{{$t('library.sLibrary')}}
      </h1>
      <div class="section-one">
        <div class="liked-songs">
          <div class="top">
            <p>
              <span v-for="(item,index) in pickedLyric"
              :key="index">
              {{item}}<br>
              </span>
            </p>
          </div>
          <div class="bottom">
            <div class="titles">
              <div class="title">{{$t('library.likedSongs')}}</div>
              <div class="sub-title">{{showLikeList.length}}{{$t('common.songs')}} </div>
            </div>
            <button >
              <svg-icon icon-class="play" class="svg-icon"></svg-icon>
            </button>
          </div>
        </div>
        <div class="songs">
          <div class="track-list">
            <div class="context-menu"></div>
            <div style="display: grid; gap: 4px; grid-template-columns: repeat(3, 1fr);">
              <div title="" class="track tracklist"  v-for="(item,index) in showLikeList.slice(0,12)" :key="index">
                <img :src="item.al.picUrl" class="">
                <div class="title-and-artist">
                  <div class="container">
                    <div class="title">{{item.name}}</div>
                    <div class="artist">
                      <span class="artist-in-line">
                        <span v-for="(i,index1) in item.ar" :key="index1">
                          <a href="#/artist/9938" class="">{{i.name}}{{index1 === item.ar.length-1?'':','}}</a>
                        </span>
                      </span>
                    </div>
                  </div>
                  <div >
                  </div>
                </div>
              </div>
        </div>
      </div>
    </div>
  </div>
  <div class="section-two">
    <div class="tabs-row">
      <div class="tabs">
        <div :class="['tab', index===currentIndex?'active':'']" v-for="(item,index) in tabs" :key="index" @click="toggleTab(index,item)">
          <span class="text">{{item}}</span>
          <span class="icon" v-if="index === 0" @click="openMenu($event)">
            <svg-icon icon-class="dropdown" class="svg-icon"></svg-icon>
          </span>
        </div>
        <div ref="contextMenu" class="context-menu1">
              <div
                v-if="showMenu"
                class="menu"
                ref="menu"
                tabindex="-1"
                @blur="closeMenu"
                @click="closeMenu"
                :style="{ 'top':`${top}px`, 'left': `${left}px` }"
              >
                <span>
                  <p>全部歌单</p>
                </span>
                <span>
                  <p>创建的歌单</p>
                  <p>收藏的歌单</p>
                </span>
              </div>
            </div>
      </div>
      <button icon="plus" class="add-playlist">
        <svg-icon icon-class="plus" class="svg-icon"></svg-icon>
        {{$t('library.newPlayList')}}
      </button>
    </div>
    <div class="section-three">
      <MusicLibraryItem v-for="(item,index) in userPlayList" :key="index" :url="`mv`" :item="item"></MusicLibraryItem>
    </div>
  </div>
</div>
</div>
</template>

<script>
// eslint-disable-next-line import/no-extraneous-dependencies
import store from 'storejs';
import MusicLibraryItem from './components/MusicLibraryItem';
import { disableScrolling, enableScrolling } from '../../utils/ui';

export default {
  name: 'Musiclibrary',
  data() {
    return {
      top: 0,
      left: 0,
      showLikeList: [],
      avatarUrl: '',
      nickname: '',
      showMenu: false,
      lyric: undefined,
      userPlayList: [],
      tabs: ['全部歌单', '专辑', '艺人', 'MV'],
      apiType: {
        全部歌单: 'userPlayList',
        专辑: 'albumSublist',
        艺人: 'artistSublist',
        MV: 'mvSublist',
      },
      currentIndex: 0,
    };
  },
  components: {
    MusicLibraryItem,
  },
  created() {
    this.$likeList({
      uid: { uid: store.get('user').account.id },
    }).then((res) => {
      this.avatarUrl = store.get('user').profile.avatarUrl;
      this.nickname = store.get('user').profile.nickname;
      return res.data.ids;
    }).then((res1) => {
      const ids = res1.join(',');
      this.$getSongDetail({
        ids,
      }).then((res2) => {
        this.showLikeList = Object.freeze(res2.data.songs);
        return this.showLikeList[0].id;
      }).then((res3) => {
        this.$musciLyric({
          id: res3,
        }).then((res4) => {
          if (res4.data.lrc !== undefined) {
            this.lyric = Object.freeze(res4.data.lrc.lyric);
          }
        });
      });
    })
      .catch((err) => {
      // eslint-disable-next-line no-console
        console.log(err);
      });
    this.toggleTab(0, '全部歌单');
  },
  methods: {
    setMenu(top, left) {
      const largestHeight =
        window.innerHeight - this.$refs.menu.offsetHeight - 25;
      const largestWidth = window.innerWidth - this.$refs.menu.offsetWidth - 25;
      if (top > largestHeight) {
        // eslint-disable-next-line no-param-reassign
        top = largestHeight;
      }
      if (left > largestWidth) {
        // eslint-disable-next-line no-param-reassign
        left = largestWidth;
      }
      this.top = `${top - 370}`;
      this.left = `${left - 170}`;
    },
    closeMenu() {
      this.showMenu = false;
      if (this.$parent.closeMenu !== undefined) {
        this.$parent.closeMenu();
      }
      enableScrolling();
    },
    openMenu(e) {
      this.showMenu = true;
      this.$nextTick(
        () => {
          this.$refs.menu.focus();
          this.setMenu(e.y, e.x);
        },
      );
      e.preventDefault();
      disableScrolling();
    },
    toggleTab(index, type) {
      this.currentIndex = index;
      let params = {};
      if (type === '全部歌单') {
        params = {
          cookie: store.get('user').cookie,
          uid: store.get('user').account.id,
        };
      }
      this[`$${this.apiType[type]}`](params).then((res) => {
        const func = {
          userPlayList: () => res.data.playlist.map((item) => {
            // eslint-disable-next-line no-param-reassign
            item.nickname = item.creator.nickname;
            return item;
          }).slice(1, res.data.playlist.length),
          albumSublist: () => res.data.data.map((item) => {
            // eslint-disable-next-line no-param-reassign
            item.coverImgUrl = item.picUrl;
            let str = '';
            item.artists.forEach((i) => {
              str += `${i.name},`;
            });
            str = str.slice(0, -1);
            // eslint-disable-next-line no-param-reassign
            item.nickname = str;
            return item;
          }),
          artistSublist: () =>
            // eslint-disable-next-line no-shadow
            res.data.data.map((item) => {
              // eslint-disable-next-line no-param-reassign
              item.coverImgUrl = item.picUrl;
              // eslint-disable-next-line no-param-reassign
              item.circle = 'circle';
              return item;
            }),
          mvSublist: () =>
            // eslint-disable-next-line no-shadow
            res.data.data.map((item) => {
              // eslint-disable-next-line no-param-reassign
              item.name = item.title;
              let str = '';
              // eslint-disable-next-line no-param-reassign
              item.nickname = item.creator.forEach((i) => {
                str += `${i.userName},`;
              });
              str = str.slice(0, -1);
              // eslint-disable-next-line no-param-reassign
              item.nickname = str;
              // eslint-disable-next-line no-param-reassign
              item.coverImgUrl = item.coverUrl;
              // eslint-disable-next-line no-param-reassign
              item.imgH = 'imgH';
              return item;
            })
          ,
        };
        this.userPlayList = func[this.apiType[type]]();
      }).catch((err) => {
        // eslint-disable-next-line no-console
        console.log(err);
      });
    },
  },
  computed: {
    pickedLyric() {
      if (this.lyric === undefined) return '';
      let lyric = this.lyric.split('\n');
      lyric = lyric.filter((l) => {
        if (l.includes('作词') || l.includes('作曲')) {
          return false;
        }
        return true;
      });
      const lyricArr = [];
      // eslint-disable-next-line no-const-assign
      for (let i = 0; i < lyric.length; i += 1) {
        if (lyric[i]) {
          if (!lyric[i].split(']')[1]) {
            lyric.splice(i, 1);
            i -= 1;
          } else {
            lyricArr.push(lyric[i].split(']')[1]);
          }
        }
      }
      return lyricArr.slice(17, 20);
    },
  },
};
</script>

<style lang="scss" scoped>
a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
h1 {
    font-size: 42px;
    color: #000;
    font-weight: bold;
    display: flex;
    align-items: center;
}
h1 .avatar {
    height: 44px;
    margin-right: 12px;
    vertical-align: -7px;
    border-radius: 50%;
    border: rgba(0,0,0,.2);
}
.section-one {
    display: flex;
    margin-top: 24px;
}
.liked-songs {
    flex: 3;
    margin-top: 8px;
    cursor: pointer;
    border-radius: 16px;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    transition: all .4s;
    box-sizing: border-box;
    background: var(--color-primary-bg);
}
.liked-songs .bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-primary);
}
.section-one .songs {
    flex: 7;
    margin-top: 8px;
    margin-left: 36px;
    overflow: hidden;
}

.liked-songs .top {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    opacity: .88;
    color: #335eea;
}
.liked-songs .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-primary);
}
.liked-songs .bottom button{
    margin-bottom: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 44px;
    width: 44px;
    background: var(--color-primary);
    border-radius: 50%;
    transition: .2s;
    box-shadow: 0 6px 12px -4px rgba(0,0,0,.2);
    cursor: default;
    border: none;
}
button, select {
    font-family: inherit;
}
.liked-songs .top p {
    margin-top: 2px;
}
.liked-songs .bottom .title {
    font-size: 24px;
    font-weight: 700;
}
.liked-songs .bottom .sub-title {
    font-size: 15px;
    margin-top: 2px;
}
.section-two {
    margin-top: 54px;
    min-height: calc(100vh - 182px);
}
.section-three{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 44px 24px;
}
.tabs-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
}
.tabs {
    display: flex;
    flex-wrap: wrap;
    font-size: 18px;
    color: var(--color-text);
}
.tabs .tab.dropdown{
    display: flex;
    align-items: center;
    padding: 0;
    overflow: hidden;
}
.tabs .tab.activ, .tabs .tab:hover {
    opacity: .88;
    background-color: var(--color-secondary-bg);
}
.tabs .tab{
    font-weight: 600;
    padding: 8px 14px;
    margin-right: 14px;
    border-radius: 8px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: .2s;
    opacity: .68;
}
.tabs .tab.dropdown .text{
    padding: 8px 3px 8px 14px;
}
.tabs .tab.dropdown .icon{
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 8px 0 3px;
}
.tabs .tab.dropdown .icon .svg-icon{
    height: 16px;
    width: 16px;
}

button.add-playlist {
    color: var(--color-text);
    border-radius: 8px;
    padding: 0 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .2s;
    opacity: .68;
    font-weight: 500;
}
button.add-playlist .svg-icon{
    width: 14px;
    height: 14px;
    margin-right: 8px;
}
button {
    background: none;
    border: none;
    cursor: pointer;
}
.tabs .tab.dropdown {
    display: flex;
    align-items: center;
    padding: 0;
    overflow: hidden;
}
.tabs .tab.active , .tabs .tab :hover {
    opacity: .88;
    background-color: var(--color-secondary-bg);
}
.tabs .tab {
    font-weight: 600;
    padding: 8px 14px;
    margin-right: 14px;
    border-radius: 8px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: .2s;
    opacity: .68;
}
.tabs .tab {
    font-weight: 600;
    padding: 8px 14px;
    margin-right: 14px;
    border-radius: 8px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: .2s;
    opacity: .68;
}
.cover-row {
    display: grid;
}
@media (max-width: 900px){
  .mv-row{
    --col-num: 4;
  }
}

.context-menu1{
    position: relative;
    // border: 1px solid black;
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-app-region: no-drag;
    p{
      // border: 1px solid black;
      height:40px;
      line-height:38px;
      padding-left:15px;
    }
    span{
      display: inline-block;
      width: 124px;
      border-radius: 8px;
      &:nth-of-type(1){
        height:42px;
        p{
          line-height:35px;
          padding-left:10px;
          margin: 5px;
          width:108px;
          border-bottom: 2px solid #f5f5f7;
        }
        &:hover{
          background: #eaeffd;
          color:#335eea;
        }
      }
      &:nth-of-type(2){
        height:80px;
        margin-top:6px;
        p{
          border-radius: 8px;
        }
        p:hover{
          background: #eaeffd;
          color:#335eea;
        }
      }
    }
}
.menu{
  padding: 5px;
  position: absolute;
  z-index:20;
  height:140px;
  width:136px;
  border-radius:8px;
  box-shadow:0px 0px 15px -7px grey;
  background: white;
  p{
    margin-bottom: 0px;
  }
}
.track img{
    border-radius: 8px;
    height: 46px;
    width: 46px;
    margin-right: 20px;
    border: 1px solid rgba(0,0,0,.04);
    cursor: pointer;
}
.track.tracklist img{
    height: 36px;
    width: 36px;
    border-radius: 6px;
    margin-right: 14px;
    cursor: pointer;
}
.track{
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.track.tracklist .title{
    font-size: 16px;
}
.track .title-and-artist .title{
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    cursor: default;
    padding-right: 16px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    word-break: break-all;
}
.liked-songs .bottom button .svg-icon{
    color: var(--color-primary-bg);
    margin-left: 4px;
    height: 16px;
    width: 16px;
}
.svg-icon{
    fill: currentColor;
}
.context-menu1 p{
  font-size: 15px;
  font-weight: bold;
}
</style>
